<template>
  <UserInfoComp>
    <div>简易留言板</div>
  </UserInfoComp>
  <hr />

  <div style="text-align: center">
    <ElButton @click="showAdd">发贴</ElButton>
  </div>

  <hr />
  <div>
    <div class="container">
      <div v-for="d in list">
        <ElCard>
          <template #header>
            <div class="title">
              <ElAvatar :src="d.userInfo.img"></ElAvatar>
              <div>
                <div>{{ d.user.nickname }}</div>
                <div>{{ Tools.formatDate(d.lastupdate) }}</div>
              </div>
            </div>
          </template>
          <div class="info">
            <div>
              <a href="javascript:void(0)" @click="showDetail(d.umid)">
                <ElTag size="large">{{ d.title }}</ElTag>
              </a>
            </div>
            <div>
              点赞数:<span>{{ d.praiseCount }}</span> 点击量:<span>{{ d.hits }}</span> 评论数:<span>{{ d.replyCount }}</span>
            </div>
          </div>
        </ElCard>
      </div>
    </div>

    <PageComp :page="pageInfo" @page-change="query"></PageComp>
  </div>

  <!-- 添加的对话框 -->
  <ElDialog title="发帖" v-model="visible" @close="query">
    <div>
      <ElForm>
        <ElFormItem>
          <ElInput v-model="addInfo.title" placeholder="请输入标题"></ElInput>
        </ElFormItem>
        <ElFormItem>
          <!-- 富文本框开始 -->
          <div style="border: 1px solid #ccc">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
            <Editor style="height: 40vh; overflow-y: hidden" v-model="addInfo.info" :defaultConfig="editorConfig" :mode="mode" @onCreated="handleCreated" />
          </div>
          <!-- 富文本框结束 -->
        </ElFormItem>

        <ElFormItem>
          <ElButton type="primary" @click="add">发布</ElButton>
          <ElButton type="danger" @click="visible = false">关闭</ElButton>
        </ElFormItem>
      </ElForm>
    </div>
  </ElDialog>
</template>

<script lang="ts" setup>
import { ElMessageBox, ElTag, ElCard, ElAvatar, ElButton, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus'
import UserInfoComp from '../../components/UserInfoComp.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ApiService } from '../../ts/ApiService'
import { Tools } from '../../ts/Tools'
import { PageInfo } from '../../ts/BaseResult'
import PageComp from '../../components/PageComp.vue'

const router = useRouter()
const pageInfo = ref(new PageInfo())
const list = ref([])
const queryInfo = ref({
  info: '',
  orderBy: 1,
})

const addInfo = ref({
  title: '',
  info: '<p></p>',
})

const visible = ref(false)

function showAdd() {
  addInfo.value.title = ''
  addInfo.value.info = '<p></p>'
  visible.value = true
}

function add() {
  ApiService.post('/message/add', addInfo.value, (data: any) => {
    ElMessageBox.alert(data.message).then(() => {
      visible.value = false
    })
  })
}

function query() {
  ApiService.post('/message/queryAll', Tools.concatJson(pageInfo.value, queryInfo.value), (data: any) => {
    if (data.success) {
      list.value = data.list
      pageInfo.value = data.page
    }
  })
}

function showDetail(umid) {
  router.push(`/user/messagedetail/${umid}`)
}

query()

//#region 富文本框的部分

import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { onBeforeUnmount, shallowRef } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

const editorRef = shallowRef()

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入...' }
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}

//#endregion
</script>

<style lang="scss" scoped>
.container {
  width: 60%;
  margin: 1rem auto;
  > div {
    margin: 1rem;
    .title {
      display: flex;
      align-items: flex-start;
      > :first-child {
        margin: 0px 0.5rem;
      }
    }
    .info {
      font-size: 1.2rem;
      > div:last-of-type {
        font-size: 0.8rem;
        margin: 0.5rem 0;
        text-align: right;
      }
    }
  }
}
</style>
